<!--
 * @Author: wangyu1
 * @Date: 2023-04-16 14:36:09
 * @Description: file content
-->
<template>
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-select v-model="domain.value" placeholder="请选择">
      <el-option
        v-for="item in filterOptions[index]"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    computed: {
      // filterOptions() {
      //   return this.dynamicValidateForm.domains.map(item => {
      //     const chickeIds = this.dynamicValidateForm.domains.filter(v => v.value !== item.value).map(v => v.value);
      //     console.log(chickeIds, 'chickeIds')
      //     const list = this.options.filter(v => !chickeIds.includes(v.value))
      //     console.log(list, 'list')
      //     return list
      //   })
      // },
      filterOptions() {
        let data = this.dynamicValidateForm.domains.map(item => item.value);
        return data.map(item => {
          return this.options.filter(v => !data.includes(v.value) || item == v.value)
        })
      }
      // filterOptions() {
      //   // 创建一个集合来保存所有的domains的值
      //   const domainValues = new Set(this.dynamicValidateForm.domains.map(item => item.value));
      //
      //   // 过滤出options中不在domains值集合中的元素
      //   return this.options.filter(option => !domainValues.has(option.value));
      // }
      // filterOptions() {
      //   const { domains } = this.dynamicValidateForm;
      //   const chickeIds = domains.map(v => v.value);
      //   const result = [];
      //
      //   for (const item of this.options) {
      //     if (!chickeIds.includes(item.value)) {
      //       result.push(item);
      //     }
      //   }
      //
      //   return domains.map(() => result);
      // },

      // filterOptions() {
      //   const { domains } = this.dynamicValidateForm;
      //   const chickeIds = domains.map(v => v.value);
      //   const result = [];
      //
      //   for (const item of this.options) {
      //     if (!chickeIds.includes(item.value)) {
      //       result.push(item);
      //     }
      //   }
      //
      //   return domains.map(() => result);
      // },

      // filterOptions() {
      //   const chickeIds = this.dynamicValidateForm.domains.map(item => item.value);
      //   return this.options.filter(item => !chickeIds.includes(item.value));
      // }
    },
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        console.log(this.dynamicValidateForm)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        console.log(this.dynamicValidateForm);
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

<style>

</style>